<template>
    <div class="headerDiv">
        <div class="headerTitle">Koko Demo</div>
        <div class="end">
            <el-icon :size="25" color="#fff" @click="quanping">
                <FullScreen />
            </el-icon>
        </div>
    </div>
</template>

<script setup lang="ts">
const quanping = () => {
    let full = document.fullscreenElement
  if (!full) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }

};
</script>

<style scoped lang="scss">
.headerDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .headerTitle {
        height: 50px;
        font-size: 30px;
        color: #fff;
        background-color: #8037e7;
    }

    .end {
        display: flex;
        align-items: center;

        .el-icon {
            cursor: pointer;
        }
    }
}
</style>